<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script> -->
    <script src="./axios1.6.7.min.js"></script>
    <title>Axios的基本使用</title>
</head>
<body>
    <!-- json-server地址：https://github.com/typicode/json-server
    启动json-server服务， 在该文件目录下执行 npx json-server ./public/AxiosExercise/db.json 
    GET    /posts
    GET    /posts/:id
    POST   /posts
    PUT    /posts/:id
    PATCH  /posts/:id
    DELETE /posts/:id

    Axios 地址：https://github.com/axios/axios
    -->
    <button>Get请求</button><button>Post请求</button><button>Put请求</button><button>DeLETE请求</button>
    <script>
        console.log("axios",axios);
        const CancelToken = axios.CancelToken;
        axios.defaults.baseURL='http://localhost:3000'  //设置BaseURL
        axios.defaults.timeout=2000;

        //request拦截器，config就是请求时传递的config对象
        axios.interceptors.request.use(function (config) {
            console.log("request-interceptors",config)
            return config;
        }, function (error) {
            
            return Promise.reject(error);
        });

        //response拦截器，response就是响应的结果
        axios.interceptors.response.use(function (response) {
            console.log("response-interceptors",response)
            return response;
        }, function (error) {
            console.log("response-interceptors-rejected",error)
            return Promise.reject(error);
        });

        function axiosBaseUse(){
            const btns= document.querySelectorAll('button');
            let myCancel=null;  //注意这里要使用let定义，因为myCancel不是常量
       
        btns[0].onclick= function(){
            if(myCancel !=null){
                myCancel(); //调用后就取消请求了
            }
            axios({
                method:'GET', //大小写都可以
                url:'/posts',
                cancelToken: new CancelToken(function executor(cancel){
                    myCancel=cancel;
                })
                
            }).then(response=>{
                console.log(response);
                myCancel=null;
            })
        }
        btns[1].onclick= function(){
            axios({
                method:'POST',
                url:'/posts',
                data:{
                    title:'自定义添加的标题',
                    views:300
                }
            }).then(response=>{
                console.log(response);
            })
        }
        btns[2].onclick= function(){
            axios({
                method:'PUT', 
                url:'/posts/4',
                data:{
                    title:'修改标题内容',
                    views:400
                }
            }).then(response=>{
                console.log(response);
            })
        }
        btns[3].onclick= function(){
            axios({
                method:'DELETE',
                url:'/posts/5'  
            }).then(response=>{
                console.log(response);
            })
        }
    }


    axiosBaseUse();
     

    </script>
</body>
</html>